"use client";

import { Modal, Form, Input, Upload, message } from 'antd';
import { useState } from 'react';
import { RiUploadCloudLine } from '@remixicon/react';
import { authService } from '@/lib/services/auth';

interface ProfileModalProps {
  open: boolean;
  onClose: () => void;
  initialValues?: {
    nickname?: string;
    email?: string;
    avatar?: string;
  };
}

export const ProfileModal = ({ open, onClose, initialValues }: ProfileModalProps) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (values: {
    nickname: string;
    email: string;
    avatar?: string;
  }) => {
    try {
      setLoading(true);
      // await authService.updateProfile(values);
      message.success('个人信息更新成功');
      onClose();
    } catch (error) {
      message.error('个人信息更新失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <Modal
      title="编辑个人信息"
      open={open}
      onCancel={onClose}
      onOk={() => form.submit()}
      confirmLoading={loading}
      draggable
      destroyOnClose
      maskClosable={false}
      width={500}
      style={{ top: 20 }}
      className="resizable-modal"
      styles={{
        body: { resize: 'both', overflow: 'auto', minHeight: '200px' }
      }}
    >
      <Form
        form={form}
        layout="vertical"
        onFinish={handleSubmit}
        initialValues={initialValues}
      >
        <Form.Item
          name="nickname"
          label="昵称"
          rules={[{ required: true, message: '请输入昵称' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="email"
          label="邮箱"
          rules={[
            { required: true, message: '请输入邮箱' },
            { type: 'email', message: '请输入有效的邮箱地址' }
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="avatar"
          label="头像"
        >
          <Upload
            listType="picture-card"
            maxCount={1}
            showUploadList={false}
            customRequest={async ({ file }) => {
              try {
                // 这里需要实现文件上传逻辑
                message.success('头像上传成功');
              } catch (error) {
                message.error('头像上传失败');
              }
            }}
          >
            <div>
              <RiUploadCloudLine className="w-6 h-6" />
              <div className="mt-2">上传头像</div>
            </div>
          </Upload>
        </Form.Item>
      </Form>
    </Modal>
  );
}; 